<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../VUE/min.Vue"></script>

<body>
    <!-- 计算属性：
            1.定义：要使用的属性不存在，要通过已有属性(已经存在于vm上的，
                    或者说写在data中的属性)计算得来 
            2.原理：底层接住了Object.defineproperty方法提供的getter和setter方法
            3.get函数什么时候执行？
                    (1) 初次读取时会执行一次
                    (2) 当依赖的数据(被使用了的，data中的属性)发生改变时被再次调用
            4.优点：与methods相比，计算属性内部有缓存机制(代码复用),效率更高，调试方便
            备注：
                1.计算属性最终会出现在vm上，直接读取使用即可
                2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时
                  依赖的数据发生改变 
                3.get相当于读，set相当于写，set方法改变后的值也会影响到计算时被依赖的值
                  那么页面中和被依赖的值相关的地方也要发生改变
                
    -->








    <div id="root">
        姓:<input type="text" v-model="xing">
        <br>
        <br>
        名:<input type="text" v-model="ming">
        <br>
        <br>
        姓名：<input type="text" v-model="fullName">

    </div>
</body>

</html>
<script>
    let vm = new Vue({
        el: '#root',
        data() {
            return {
                xing: '张',
                ming: '三'
            }
        },
        computed: {
            fullName: {
                get() {
                    console.log('get被调用了');
                    // 此处的this是vm
                    console.log(this);
                    return this.xing + '-' + this.ming
                },
                // set什么时候调用?当计算属性被修改时
                // value就是get()的返回值
                set(value){
                    let arr = value.split('-')
                    this.xing = arr[0]
                    this.ming = arr[1]
                }
            }
        }
    })


    // console.log(vm);
</script>